<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div class="host-body">
        <div class="d-flex jc-center dc-header">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <div class="title"></div>
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>
        <div class="d-flex dc-top">
          <div class="top-bg">
            <div class="top-bg-left">
              <div class="title-bg">项目招标信息</div>
              <div class="top-left-content">
                <div class="top-left-icon">
                  <div class="top-left-icona">
                    <div class="icon-content">
                      <div class="icon-title">投标供应商</div>
                      <div class="icon-num">{{ bddingSupplierCount }}</div>
                    </div>
                  </div>
                  <div class="flex-h"></div>
                  <div class="top-left-iconb">
                    <div class="icon-content">
                      <div class="icon-title">中标供应商</div>
                      <div class="icon-num">{{ winningSupplierCount }}</div>
                    </div>
                  </div>
                </div>
                <div class="top-right-echart">
                  <fanChart ref="fanChartRef" />
                </div>
              </div>
            </div>
            <div class="w-24"></div>
            <div class="top-bg-center">
              <div class="title-center-bg">项目金额信息（万元）</div>
              <div class="top-center-num">
                <div class="top-progress">
                  <div class="top-num">
                    <div class="num-info">{{ contractAmount }}</div>
                    <div class="text-info">合同</div>
                  </div>
                  <div class="process-num">80%</div>
                </div>

                <!-- // "contractAmount": 100,    	// 合同金额
      //   "planAmount": 50, 		 	// 计划金额
      //   "demandAmount": 30,     	// 需求金额
      //   "supplyAmount": 20,       	// 供应金额
      //   "deliveryCount": 18,  		// 到货金额
      //   "acceptanceAmount": 16,  	// 验收金额
      //   "settlementAmount": 12,   	// 结算金额
      //   "checkPriceAmount": 10,   	// 验工计价金额
      //   "completeBiddingPrice": 100,	// 完成招标概算价
      //   "bidPrice": 100,   			// 投标报价
      //   "noBiddingPrice": 100,   	// 未招标概算价
      //   "progressBiddingPrice": 100	// 招标进行中概算价 -->
                <div class="w-32"></div>
                <div class="top-progress">
                  <div class="top-num">
                    <div class="num-info">{{ planAmount }}</div>
                    <div class="text-info">计划</div>
                  </div>
                </div>
                <div class="w-32"></div>
                <div class="top-progress">
                  <div class="top-num">
                    <div class="num-info">{{ demandAmount }}</div>
                    <div class="text-info">需求</div>
                  </div>
                </div>
                <div class="w-32"></div>
                <div class="top-progress">
                  <div class="top-num">
                    <div class="num-info">{{ supplyAmount }}</div>
                    <div class="text-info">供应</div>
                  </div>
                </div>
                <div class="w-32"></div>
                <div class="top-progress">
                  <div class="top-num">
                    <div class="num-info">{{ deliveryCount }}</div>
                    <div class="text-info">到货</div>
                  </div>
                </div>
                <div class="w-32"></div>
                <div class="top-progress">
                  <div class="top-num">
                    <div class="num-info">{{ acceptanceAmount }}</div>
                    <div class="text-info">验收</div>
                  </div>
                </div>
                <div class="w-32"></div>
                <div class="top-progress">
                  <div class="top-num">
                    <div class="num-info">{{ settlementAmount }}</div>
                    <div class="text-info">结算</div>
                  </div>
                </div>
                <div class="w-32"></div>
                <div class="top-progress">
                  <div class="top-num">
                    <div class="num-info">{{ checkPriceAmount }}</div>
                    <div class="text-info">验工计价</div>
                  </div>
                </div>
              </div>
              <div class="top-center-zb">
                <div class="top-center-single">
                  <div class="w-flex-1">
                    <div class="icon-48-1 icon-48"></div>
                    <div class="icon-content">
                      <div class="icon-title">完成招标概算价</div>
                      <div class="icon-num">{{ completeBiddingPrice }}</div>
                    </div>
                  </div>
                  <div class="w-flex-1">
                    <div class="icon-48-2 icon-48"></div>
                    <div class="icon-content">
                      <div class="icon-title">投标报价</div>
                      <div class="icon-num">{{ bidPrice }}</div>
                    </div>
                  </div>
                </div>
                <div class="w-16"></div>
                <div class="top-center-single">
                  <div class="w-flex-1">
                    <div class="icon-48-3 icon-48"></div>
                    <div class="icon-content">
                      <div class="icon-title">未招标概算价</div>
                      <div class="icon-num">{{ noBiddingPrice }}</div>
                    </div>
                  </div>
                  <div class="w-flex-1">
                    <div class="icon-48-4 icon-48"></div>
                    <div class="icon-content">
                      <div class="icon-title">招标进行中概算价</div>
                      <div class="icon-num">{{ progressBiddingPrice }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-24"></div>

            <div class="top-bg-right">
              <div class="title-bg">项目资料</div>
              <div class="pie-echarts">
                <pieChart ref="pieChartRef" />
              </div>
            </div>
          </div>
        </div>

        <div class="dc-body">
          <div class="dc-body-left">
            <div class="dc-body-left-li">
              <div class="title-bg title-bg-b0">甲供物资品类（种）</div>
              <div class="dc-body-left-gif">
                <div class="dc-git-li">
                  <div class="dc-git-icon dc-git-icon1">
                    <div class="dc-git-box"></div>
                  </div>
                  <!-- //  materialsCount: 0,  		// 材料数量
      //   equipmentCount: 0, 		// 设备数量
      //   sparePartsCount: 0,        // 备品备件数量
      //   toolsCount: 0,          	// 工器具数量 -->
                  <div class="dc-git-text">
                    <div class="dc-git-num">{{ materialsCount }}</div>
                    <div class="dc-git-tx">材料</div>
                  </div>
                </div>
                <div class="dc-git-li">
                  <div class="dc-git-icon dc-git-icon2">
                    <div class="dc-git-box"></div>
                  </div>
                  <div class="dc-git-text">
                    <div class="dc-git-num">{{ equipmentCount }}</div>
                    <div class="dc-git-tx">设备</div>
                  </div>
                </div>
                <div class="dc-git-li">
                  <div class="dc-git-icon dc-git-icon3">
                    <div class="dc-git-box"></div>
                  </div>
                  <div class="dc-git-text">
                    <div class="dc-git-num">{{ sparePartsCount }}</div>
                    <div class="dc-git-tx">备品备件</div>
                  </div>
                </div>
                <div class="dc-git-li">
                  <div class="dc-git-icon dc-git-icon4">
                    <div class="dc-git-box"></div>
                  </div>
                  <div class="dc-git-text">
                    <div class="dc-git-num">{{ toolsCount }}</div>
                    <div class="dc-git-tx">工器具</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="dc-body-left-li">
              <div class="title-bg title-bg-b0">自购物资监督（个）</div>
              <div class="dc-body-left-gif" style="padding: 20px 0">
                <!-- <centerRight2 :zgwzjdData="zgwzjdData"/> -->
                <dv-capsule-chart class="dv-cap-chart" :config="config" />
              </div>
            </div>
            <div class="dc-body-left-li">
              <div class="title-bg title-bg-b0">收货合格统计</div>
              <div class="dc-body-left-gif" style="padding: 20px 0">
                <div style="flex: 1; width: 0">
                  <panelChart ref="panelChartRef1" />
                </div>
                <div style="flex: 1; width: 0">
                  <panelChart ref="panelChartRef2" />
                </div>
              </div>
            </div>
          </div>
          <div class="w-24"></div>
          <div class="dc-body-center">
            <div class="dc-body-in">
              <div class="line-subwar">
                
                <div class="company-l" v-for="item in 7" :key="item" :class="`company-l${item}`"> 
                  <div class="company-pb">
                    <!-- bidSectionName: 20, // 标段名称
      bidState: 12, // 招标状态
      contractProportion: "100%", // 合同占比
      annualDemandProportion: "80%", // 年度需求占比
      monthlyDemandProportion: "50%", // 月度需求占比
      deliveryProportion: "90%", // 到货占比
      acceptanceProportion: "90%", // 验收占比
      checkPriceProportion: "80%", // 验工计价占比 -->
                    <div class="company-name">{{ bidSectionName }}</div>
                    <div class="company-status">{{ bidState }}</div>
                    <div class="company-bid">
                      合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;同：{{ contractProportion }}
                    </div>
                    <div class="company-bid">年度需求：{{ annualDemandProportion }}</div>
                    <div class="company-bid">月度需求：{{ monthlyDemandProportion }}</div>
                    <div class="company-bid">
                      到&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;货：{{ deliveryProportion }}
                    </div>
                    <div class="company-bid">
                      验&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收：{{ acceptanceProportion }}
                    </div>
                    <div class="company-bid">验工计价：{{ checkPriceProportion }}</div>
                  </div>
                </div>
                <!-- <div class="company-l company-l2"></div>
                <div class="company-l company-l3"></div>
                <div class="company-l company-l4"></div>
                <div class="company-l company-l5"></div>
                <div class="company-l company-l6"></div>
                <div class="company-l company-l7"></div> -->
                <div class="map-icon-1 map-icon">
                  <!-- <i class="iconfont icon-dituzuobiao"></i> -->
                </div>
                <div class="map-icon-2 map-icon">
                  <!-- <i class="iconfont icon-dituzuobiao"></i> -->
                </div>
                <div class="map-icon-3 map-icon">
                  <!-- <i class="iconfont icon-dituzuobiao"></i> -->
                </div>
                <div class="map-icon-4 map-icon">
                  <!-- <i class="iconfont icon-dituzuobiao"></i> -->
                </div>
                <div class="map-icon-5 map-icon">
                  <!-- <i class="iconfont icon-dituzuobiao"></i> -->
                </div>
                <div class="map-icon-6 map-icon">
                  <!-- <i class="iconfont icon-dituzuobiao"></i> -->
                </div>
                <div class="map-icon-7 map-icon">
                  <!-- <i class="iconfont icon-dituzuobiao"></i> -->
                </div>
                <div class="line-bid-1 line-bid-hover">
                  <div class="line-section" ref="lineRef1"></div>
                </div>
                <div class="line-bid-2 line-bid-hover">
                  <div class="line-section" ref="lineRef2"></div>
                </div>
                <div class="line-bid-3 line-bid-hover">
                  <div class="line-section" ref="lineRef3"></div>
                </div>
                <div class="line-bid-4 line-bid-hover">
                  <div class="line-section" ref="lineRef4"></div>
                </div>
                <div class="line-bid-5 line-bid-hover">
                  <div class="line-section" ref="lineRef5"></div>
                </div>
                <div class="line-bid-6 line-bid-hover">
                  <div class="line-section" ref="lineRef6"></div>
                </div>
                <div class="line-bid-7 line-bid-hover">
                  <div class="line-section" ref="lineRef7"></div>
                </div>
              </div>

              <div class="dc-all-un">
                <div class="dc-li-unit">
                  <div class="dc-line1"></div>
                  <span class="dc-li-text">中铁一局CJZQ-1标</span>
                </div>
                <div class="dc-li-unit">
                  <div class="dc-line1" style="background: #80f675"></div>
                  <span class="dc-li-text">中铁二十四局CJZQ-2标</span>
                </div>
                <div class="dc-li-unit">
                  <div class="dc-line1" style="background: #6bfbce"></div>
                  <span class="dc-li-text">中铁三局CJZQ-3标</span>
                </div>
                <div class="dc-li-unit">
                  <div class="dc-line1" style="background: #0080ff"></div>
                  <span class="dc-li-text">中铁十二局CJZQ-4标</span>
                </div>
                <div class="dc-li-unit">
                  <div class="dc-line1" style="background: #003bfd"></div>
                  <span class="dc-li-text">中铁大桥局CJZQ-5标</span>
                </div>
                <div class="dc-li-unit">
                  <div class="dc-line1" style="background: #5700fd"></div>
                  <span class="dc-li-text">中交二航局CJZQ-6标</span>
                </div>
                <div class="dc-li-unit">
                  <div class="dc-line1" style="background: #af00ff"></div>
                  <span class="dc-li-text">中铁十四局CJZQ-7标</span>
                </div>
              </div>
              <div class="border-dashed"></div>
              <div class="border-bg">
                <div class="bg-title">施工通报</div>
                <div class="bg-icon"></div>

                <div class="bg-text">
                  <vue-seamless-scroll
                    :data="constructionNotice"
                    :classOption="classOption"
                  >
                    <div
                      class="scroller-content"
                      v-for="(item, index) in constructionNotice"
                      :key="'content' + index"
                    >
                      {{ item.content }}
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div class="dc-body-bottom"></div>
          </div>
          <div class="w-24"></div>
          <div class="dc-body-right">
            <div class="dc-body-left-li">
              <div class="title-bg title-bg-b0">物资供应统计</div>
              <div class="dc-body-left-gif" style="padding: 20px 0">
                <div style="flex: 1; width: 0">
                  <panelChart2 ref="panelChart2Ref1" />
                </div>
                <div style="flex: 1; width: 0">
                  <panelChart2 ref="panelChart2Ref2" />
                </div>
              </div>
            </div>
            <div class="dc-body-left-li">
              <div class="title-bg title-bg-b0">验工计价统计</div>
              <div class="dc-btn">
                <div class="dc-btn-w"></div>
                <div class="dc-btn-box">
                  <div
                    class="dc-btn-b"
                    :class="['dc-btn-la', 'dc-btn-l'][type]"
                    @click="handleTag(0)"
                  >
                    本年
                  </div>
                  <!-- <div class="dc-btn-b dc-btn-la"></div> -->
                  <div
                    class="dc-btn-b"
                    :class="['dc-btn-r', 'dc-btn-ra'][type]"
                    @click="handleTag(1)"
                  >
                    开累
                  </div>
                </div>
              </div>
              <div class="dc-body-left-gif">
                <barChart ref="barChartRef" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";
import pieChart from "./pieChart";

// import centerRight2 from './centerRight2'

import fanChart from "./fanChart";

import panelChart from "./panelChart";
import panelChart2 from "./panelChart2";

import VueSeamlessScroll from "vue-seamless-scroll";
// , queryReceiveGoodsQualifiedStatistics,
//   queryMaterialSupplyStatistics, queryCheckPriceStatistics, queryConstructionNotice
import {
  queryBiddingInfo,
  queryProjecAmounttInfo,
  queryProjecDocumentInfo,
  queryMatCategory,
  queryselfBuyingMatSupervision,
  queryReceiveGoodsQualifiedStatistics,
  queryMaterialSupplyStatistics,
  queryCheckPriceStatistics,
  queryConstructionNotice,
  queryBidSectionByName,
} from "@/utils/api";
import barChart from "./barChart";
export default {
  mixins: [drawMixin],
  computed: {
    classOption() {
      //大屏滚动配置参数
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
        singleHeight: 20,
      };
    },
  },
  data() {
    return {
      bddingSupplierCount: 0,
      winningSupplierCount: 0,

      contractAmount: 0, // 合同金额
      planAmount: 0, // 计划金额
      demandAmount: 0, // 需求金额
      supplyAmount: 0, // 供应金额
      deliveryCount: 0, // 到货金额
      acceptanceAmount: 0, // 验收金额
      settlementAmount: 0, // 结算金额
      checkPriceAmount: 0, // 验工计价金额
      completeBiddingPrice: 0, // 完成招标概算价
      bidPrice: 0, // 投标报价
      noBiddingPrice: 0, // 未招标概算价
      progressBiddingPrice: 0, // 招标进行中概算价

      noticeCount: 0, // 通知数量
      regulationsCount: 0, // 规章制度数量
      reportCount: 0, // 报告数量
      requestCount: 0, // 请示数量

      bidSectionName: 20, // 标段名称
      bidState: 12, // 招标状态
      contractProportion: "100%", // 合同占比
      annualDemandProportion: "80%", // 年度需求占比
      monthlyDemandProportion: "50%", // 月度需求占比
      deliveryProportion: "90%", // 到货占比
      acceptanceProportion: "90%", // 验收占比
      checkPriceProportion: "80%", // 验工计价占比

      materialsCount: 0, // 材料数量
      equipmentCount: 0, // 设备数量
      sparePartsCount: 0, // 备品备件数量
      toolsCount: 0, // 工器具数量

      zgwzjdData: [],
      config: {},

      thisYearFirstQuarter: 30, // 本年第一季度数量
      thisYearSecondQuarter: 35, // 本年第二季度数量
      thisYearThirdQuarter: 32, // 本年第三季度数量
      thisYearFourthQuarter: 40, // 本年第四季度数量
      cumulativeFirstQuarter: 80, // 开累第一季度数量
      cumulativeSecondQuarter: 75, // 开累第二季度数量
      cumulativeThirdQuarter: 78, // 开累第三季度数量
      cumulativeFourthQuarter: 85, // 开累第四季度数量
      constructionNotice: [],
      btnFlag: false,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
      companyName:[
        "中铁一局CJZQ-1标",
        "中铁二十四局CJZQ-2标",
        "中铁三局CJZQ-3标",
        "中铁十二局CJZQ-4标",
        "中铁大桥局CJZQ-5标",
        "中交二航局CJZQ-6标",
        "中铁十四局CJZQ-7标",
      ],

      type: 0,
    };
  },
  components: {
    pieChart,
    fanChart,
    // centerRight2,
    panelChart,
    panelChart2,
    barChart,
    VueSeamlessScroll,
  },
  mounted() {
    // this.timeFn()
    this.cancelLoading();

    this.queryGetApi();

    this.handleClick("中铁一局CJZQ-1标");
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    addClassNameAfterDelay(index,companyDom) {
      let dom = this.$refs[`lineRef${index}`];
      // let domNew = this.$refs[`lineRef${index+1}`];
      let num = index;
      if(index == this.companyName.length){
        // domNew = 0;
        num = 0;
      }
      

      let lineDom = document.querySelectorAll(".line-section");
      Array.from(lineDom).forEach((item) => {
        item.classList.remove("active");
      });
      
      dom.classList.add("active");
      dom.classList.remove("active-h");
      let timeOut = setTimeout(() => {
        dom.classList.add("active-h");
        
        companyDom[index-1].classList.remove("company-active");
        // companyDom[index].classList.add("company-active");
        
        this.handleClick(this.companyName[num]);
        clearInterval(timeOut); //清除定时器
      }, 5000); // 10秒后执行
    },
    

    handleTag(val) {
      this.type = val;
      if (val == 0) {
        this.handleTaga();
      } else {
        this.handleTagb();
      }
    },
    handleTaga() {
      let xData = ["第一季度", "第二季度", "第三季度", "第四季度"];
      let yData = [
        this.thisYearFirstQuarter,
        this.thisYearSecondQuarter,
        this.thisYearThirdQuarter,
        this.thisYearFourthQuarter,
      ];
      this.$refs.barChartRef.initChart(xData, yData);
    },
    handleTagb() {
      let xData = ["2025", "2024", "2023", "2022"];
      let yData = [
        this.cumulativeFirstQuarter,
        this.cumulativeSecondQuarter,
        this.cumulativeThirdQuarter,
        this.cumulativeFourthQuarter,
      ];
      // this.cumulativeFirstQuarter = res5.cumulativeFirstQuarter;
      // this.cumulativeSecondQuarter = res5.cumulativeSecondQuarter;
      // this.cumulativeThirdQuarter = res5.cumulativeThirdQuarter;
      // this.cumulativeFourthQuarter = res5.cumulativeFourthQuarter;
      this.$refs.barChartRef.initChart(xData, yData);
    },
    async handleClick(val) {
      this.bidSectionName = val;
      const json = {
        bidSectionName: JSON.stringify(val),
      };

      let res = await queryMatCategory(json);
      this.materialsCount = res.materialsCount;
      this.equipmentCount = res.equipmentCount;
      this.sparePartsCount = res.sparePartsCount;
      this.toolsCount = res.toolsCount;

      //  annualSuperviseCheckNum: 0,  		// 重要自购物资数量
      //     annualPurchSupervisionNum: 0, 	// 年度采购计划数量
      //     annualSelfCheckReportNum: 0,   // 公开招标监督数量
      //     annualPurchContractNum: 0,         // 合同核备数量
      let res2 = await queryselfBuyingMatSupervision(json);

      const arrN = [
        "annualPurchSupervisionNum",
        "annualSelfCheckReportNum",
        "annualSuperviseCheckNum",
        "annualPurchContractNum",
      ];

      let datar = [
        {
          name: "年度检查",
          value: 0,
        },
        {
          name: "采购监督",
          value: 0,
        },
        {
          name: "施工自查",
          value: 0,
        },
        {
          name: "合同核备",
          value: 0,
        },
      ];
      this.zgwzjdData = datar.map((item, index) => {
        item.value = res2[arrN[index]];
        return item;
      });
      this.$set(this.config, "data", this.zgwzjdData);

      let res3 = await queryReceiveGoodsQualifiedStatistics(json);

      this.$refs.panelChartRef1.initChart(
        Number(res3.deliveryQualifiedRate.replace("%", "")),
        "到货率"
      );

      this.$refs.panelChartRef2.initChart(
        Number(res3.acceptanceQualificationRate.replace("%", "")),
        "验收完成率"
      );

      let res4 = await queryMaterialSupplyStatistics(json);

      //     const dataList = [
      //   { name: '已发货', value: 50 },
      //   { name: '未发货', value: 50 }
      // ]
      const dataList = [
        { name: "已发货", value: 0 },
        { name: "未发货", value: 0 },
      ];
      const aL1 = ["dispatchedProportion", "noDispatchedProportion"];
      let dataL1 = dataList.map((item, index) => {
        item.value = Number(res4[aL1[index]].replace("%", ""));
        return item;
      });
      console.log(dataL1);
      const aL2 = ["receivedGoodsProportion", "noReceivedGoodsProportion"];
      let dataL2 = dataList.map((item, index) => {
        item.value = Number(res4[aL2[index]].replace("%", ""));
        return item;
      });
      this.$refs.panelChart2Ref1.initChart(dataL1);

      this.$refs.panelChart2Ref2.initChart(dataL2);

      let res5 = await queryCheckPriceStatistics(json);
      console.log(res5);
      //       "thisYearFirstQuarter" : 30,  			// 本年第一季度数量
      // 			"thisYearSecondQuarter" : 35, 			// 本年第二季度数量
      // "thisYearThirdQuarter" : 32,  			// 本年第三季度数量
      // 			"thisYearFourthQuarter" : 40, 			// 本年第四季度数量
      // "cumulativeFirstQuarter" : 80,  		// 开累第一季度数量
      // 			"cumulativeSecondQuarter" : 75, 			// 开累第二季度数量
      // "cumulativeThirdQuarter" : 78,  		// 开累第三季度数量
      // 			"cumulativeFourthQuarter" : 85 			// 开累第四季度数量

      this.thisYearFirstQuarter = res5.thisYearFirstQuarter;
      this.thisYearSecondQuarter = res5.thisYearSecondQuarter;
      this.thisYearThirdQuarter = res5.thisYearThirdQuarter;
      this.thisYearFourthQuarter = res5.thisYearFourthQuarter;

      this.cumulativeFirstQuarter = res5.cumulativeFirstQuarter;
      this.cumulativeSecondQuarter = res5.cumulativeSecondQuarter;
      this.cumulativeThirdQuarter = res5.cumulativeThirdQuarter;
      this.cumulativeFourthQuarter = res5.cumulativeFourthQuarter;

      this.handleTaga();

      const datad = await queryConstructionNotice(json);

      const a = datad.map((item) => {
        return item.content;
      });

      const b = datad.filter((item, index) => {
        return a.indexOf(item.content) === index;
      });

      this.constructionNotice = [...b];
      // // this.$delete(this.matCategory)

      // // this.$delete(this.selfBuyingMatSupervision)
      // this.selfBuyingMatSupervision = await queryselfBuyingMatSupervision(json);
      // this.$delete(this.receiveGoodsQualifiedStatistics)
      //
      // this.$delete(this.materialSupplyStatistics)
      // this.materialSupplyStatistics = await queryMaterialSupplyStatistics(json);
      // this.$delete(this.CheckPriceStatistics)

      // // this.$delete(this.constructionNotice)

      //    queryBidSectionByName,
      // queryMatCategory, queryselfBuyingMatSupervision, queryReceiveGoodsQualifiedStatistics,
      // queryMaterialSupplyStatistics, queryCheckPriceStatistics, queryConstructionNotice
      const res6 = await queryBidSectionByName(json);
      this.bidState = res6.bidState;
      this.contractProportion = res6.contractProportion;
      this.annualDemandProportion = res6.annualDemandProportion;
      this.monthlyDemandProportion = res6.monthlyDemandProportion;
      this.deliveryProportion = res6.deliveryProportion;
      this.acceptanceProportion = res6.acceptanceProportion;
      this.checkPriceProportion = res6.checkPriceProportion;

      // bidSectionName: 20, // 标段名称
      //   bidState: 12, // 招标状态
      //   contractProportion: "100%", // 合同占比
      //   annualDemandProportion: "80%", // 年度需求占比
      //   monthlyDemandProportion: "50%", // 月度需求占比
      //   deliveryProportion: "90%", // 到货占比
      //   acceptanceProportion: "90%", // 验收占比
      //   checkPriceProportion: "80%", // 验工计价占比

      // div class="dc-all-un">
      //           <div class="dc-li-unit">
      //             <div class="dc-line1"></div>
      //             <span class="dc-li-text">中铁一局CJZQ-1标</span>
      //           </div>
      //           <div class="dc-li-unit">
      //             <div class="dc-line1" style="background:#80F675;"></div>
      //             <span class="dc-li-text">中铁二十四局CJZQ-2标</span>
      //           </div>
      //           <div class="dc-li-unit">
      //             <div class="dc-line1" style="background:#6BFBCE;"></div>
      //             <span class="dc-li-text">中铁三局CJZQ-3标</span>
      //           </div>
      //           <div class="dc-li-unit">
      //             <div class="dc-line1" style="background:#0080FF;"></div>
      //             <span class="dc-li-text">中铁十二局CJZQ-4标</span>
      //           </div>
      //           <div class="dc-li-unit">
      //             <div class="dc-line1" style="background:#003BFD;"></div>
      //             <span class="dc-li-text">中铁大桥局CJZQ-5标</span>
      //           </div>
      //           <div class="dc-li-unit">
      //             <div class="dc-line1" style="background:#5700FD;"></div>
      //             <span class="dc-li-text">中交二航局CJZQ-6标</span>
      //           </div>
      //           <div class="dc-li-unit">
      //             <div class="dc-line1" style="background:#AF00FF;"></div>
      //             <span class="dc-li-text">中铁十四局CJZQ-7标</span>
      //           </div>
      // if(this.$refs?.lineRef1?.classList){
      //   this.$refs.lineRef1.classList.add('active');
      // const companyName = [
      //   "中铁一局CJZQ-1标",
      //   "中铁二十四局CJZQ-2标",
      //   "中铁三局CJZQ-3标",
      //   "中铁十二局CJZQ-4标",
      //   "中铁大桥局CJZQ-5标",
      //   "中交二航局CJZQ-6标",
      //   "中铁十四局CJZQ-7标",
      // ];

      const index = this.companyName.findIndex((item) => item == val);

      let companyDom = document.querySelectorAll(".company-l");
      Array.from(companyDom).forEach((item) => {
        item.classList.remove("company-active");
      });
      companyDom[index].classList.add("company-active");

      
      
      this.addClassNameAfterDelay(index+1, companyDom);
      // }
    },
    handleMoney(num) {
      // 首先先声明一个金额单位数组
      // let AmountUnitlist = ["元", "万元", "亿", "兆", '京', '垓', '杼']
      // 将数字金额转为字符串
      let strnum = num.toString();
      // 声明一个变量用于接收金额单位
      // let AmountUnit = ''
      // 循环遍历单位数组
      // AmountUnitlist.find((item) => {
      let newNum = "";
      // 判断一下传进来的金额是否包含小数点
      if (strnum.indexOf(".") !== -1) {
        // 若有则将小数点前的字符截取出来
        newNum = strnum.substring(0, strnum.indexOf("."));
      } else {
        // 没有则直接等于原金额
        newNum = strnum;
      }
      // 判断一下经过小数点截取后的金额字符长度是否小于5
      // if (newNum.length < 5) {
      //   // 若小于5则接收当前单位，并跳出迭代
      //   AmountUnit = item
      //   return true
      // } else {
      //   // 若不小于5则将经过小数点截取处理过后的字符除以10000后作为下一轮迭代的初始金额重新判断(每一个单位之间相距4位数，故除以10000)
      strnum = (((newNum * 1) / 10000).toString() * 1).toFixed(0);
      // }
      // })
      // let money = {num: 0, unit: ""}
      // // 保留2位小数
      // money.num = (strnum * 1).toFixed(0)
      // // 接收单位
      // money.unit = AmountUnit
      return strnum;
    },

    async queryGetApi() {
      let res = await queryBiddingInfo();
      this.bddingSupplierCount = res.bddingSupplierCount;
      this.winningSupplierCount = res.winningSupplierCount;
      const optionData = [
        {
          name: "未开始", //名称
          value: 100, //值
          itemStyle: {
            //颜色
            color: "rgba(0, 147, 255,0.8)",
          },
        },
        {
          name: "进行中",
          value: 13,
          itemStyle: {
            color: "rgba(128, 525, 216,0.8)",
          },
        },
        {
          name: "已完成",
          value: 15,
          itemStyle: {
            color: "rgba(17, 140, 200,0.8)",
          },
        },
      ];
      let jsonArray = ["noStartedCount", "progressCount", "completedCount"];
      let optionDataNew = optionData.map((item, index) => {
        item.value = res[jsonArray[index]];
        return item;
      });
      console.log(optionDataNew);
      this.$refs.fanChartRef.init(optionDataNew);

      let res1 = await queryProjecAmounttInfo();
      this.contractAmount = this.handleMoney(res1.contractAmount);
      this.planAmount = this.handleMoney(res1.planAmount);
      this.demandAmount = this.handleMoney(res1.demandAmount);
      this.supplyAmount = this.handleMoney(res1.supplyAmount);
      this.deliveryCount = this.handleMoney(res1.deliveryCount);
      this.acceptanceAmount = this.handleMoney(res1.acceptanceAmount);
      this.settlementAmount = this.handleMoney(res1.settlementAmount);
      this.checkPriceAmount = this.handleMoney(res1.checkPriceAmount);
      this.completeBiddingPrice = this.handleMoney(res1.completeBiddingPrice);
      this.bidPrice = this.handleMoney(res1.bidPrice);
      this.noBiddingPrice = this.handleMoney(res1.noBiddingPrice);
      this.progressBiddingPrice = this.handleMoney(res1.progressBiddingPrice);
      // "contractAmount": 100,    	// 合同金额
      //   "planAmount": 50, 		 	// 计划金额
      //   "demandAmount": 30,     	// 需求金额
      //   "supplyAmount": 20,       	// 供应金额
      //   "deliveryCount": 18,  		// 到货金额
      //   "acceptanceAmount": 16,  	// 验收金额
      //   "settlementAmount": 12,   	// 结算金额
      //   "checkPriceAmount": 10,   	// 验工计价金额
      //   "completeBiddingPrice": 100,	// 完成招标概算价
      //   "bidPrice": 100,   			// 投标报价
      //   "noBiddingPrice": 100,   	// 未招标概算价
      //   "progressBiddingPrice": 100	// 招标进行中概算价

      let res2 = await queryProjecDocumentInfo();

      let optionDataa = [
        {
          name: "通知", //名称
          value: 100, //值
          itemStyle: {
            //颜色
            color: "rgba(0, 155, 255,0.8)",
          },
        },
        {
          name: "规章制度",
          value: 13,
          itemStyle: {
            color: "rgba(13, 150, 107,0.8)",
          },
        },
        {
          name: "报告",
          value: 15,
          itemStyle: {
            color: "rgba(53, 190, 252,0.8)",
          },
        },
        {
          name: "请示",
          value: 15,
          itemStyle: {
            color: "rgba(43, 209, 157,0.8)",
          },
        },
      ];
      //   noticeCount: 0,  			// 通知数量
      // regulationsCount: 0, 		// 规章制度数量
      // reportCount: 0,    			// 报告数量
      // requestCount: 0,        		// 请示数量

      let newArr = [
        "noticeCount",
        "regulationsCount",
        "reportCount",
        "requestCount",
      ];

      // let jsonArray = ['noStartedCount','progressCount','completedCount']
      let optionDataNewa = optionDataa.map((item, index) => {
        item.value = res2[newArr[index]];
        return item;
      });
      this.$refs.pieChartRef.init(optionDataNewa);
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;

  .bg {
    width: 100%;
    height: 100%;
    // padding: 16px 16px 0 16px;
    background-image: url("../assets/pageBg.png");
    background-size: cover;
    background-position: center center;
  }

  .w-16 {
    min-width: 16px;
  }

  .w-24 {
    min-width: 24px;
  }

  .w-32 {
    min-width: 32px;
  }

  .title-bg {
    height: 39px;
    border: 1px dashed #7c7f83;
    width: 100%;
    font-style: italic;
    color: #ffffff;
    font-size: 20px;
    padding-left: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    background-image: url("../assets/title-bg.png");
    background-size: cover;
    background-position: center center;
  }

  .title-bg-b0 {
    border: 0;
  }

  .title-center-bg {
    border: 1px dashed #7c7f83;
    height: 39px;
    color: #ffffff;
    font-style: italic;
    font-size: 20px;
    padding-left: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    width: 100%;
    background-image: url("../assets/title-center-bg.png");
    background-size: cover;
    background-position: center center;
  }

  .host-body {
    display: flex;
    height: 100%;
    flex-direction: column;
    .dc-body {
      flex: 1;
      height: 0;
      display: flex;
      padding: 0 20px;
      .dc-body-left,
      .dc-body-right {
        width: 440px;
        height: 100%;
        display: flex;
        flex-direction: column;
        .dc-body-left-li {
          flex: 1;
          height: 0;
          margin-bottom: 12px;
          display: flex;
          flex-direction: column;
          .dc-body-left-gif {
            flex: 1;
            height: 0;
            display: flex;
            .dc-git-li {
              width: 0;
              flex: 1;
              padding-top: 10px;
              .dc-git-icon {
                width: 60px;
                margin: 0 auto;
                height: 80px;
                // background-image: url("../assets/title-center-bg.png");
                background-size: cover;
                background-position: center center;
                display: flex;
                align-items: center;
                justify-content: center;
                .dc-git-box {
                  width: 40px;
                  height: 40px;
                  border: 1px dashed #7c7f83;
                }
              }
              .dc-git-icon1 {
                background-image: url("../assets/left-icon-1.gif");
              }
              .dc-git-icon2 {
                background-image: url("../assets/left-icon-2.gif");
              }
              .dc-git-icon3 {
                background-image: url("../assets/left-icon-3.gif");
              }
              .dc-git-icon4 {
                background-image: url("../assets/left-icon-4.gif");
              }
              .dc-git-text {
                width: 100px;
                height: 100px;
                border: 1px dashed #7c7f83;
                margin: 0 auto;
                background-image: url("../assets/top-left-bg.png");
                background-size: cover;
                background-position: center center;
                padding-top: 40px;
                .dc-git-num {
                  font-weight: bold;
                  font-size: 20px;
                  color: #ffffff;
                  text-align: center;
                  margin-bottom: 16px;
                }
                .dc-git-tx {
                  font-size: 12px;
                  color: #ffffff;
                  text-align: center;
                }
              }
            }
          }
        }
      }
      .dc-body-center {
        width: 0;
        flex: 1;
        height: 100%;
        background-image: url("../assets/zj-bj.png");
        background-repeat: no-repeat;
        background-position: center center;

        display: flex;
        flex-direction: column;
        .dc-body-in {
          flex: 1;
          height: 0;
          position: relative;
          .dc-all-un {
            height: 183px;
            width: 168px;
            background-image: url("../assets/dw.png");
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            left: 50px;
            
            bottom: 30px;
            padding: 12px 0 0 8px;
            .dc-li-unit {
              display: flex;
              align-items: center;
              height: 23px;
              .dc-line1 {
                width: 20px;
                height: 1px;
                background: #d7fc04;
                margin-right: 10px;
              }
              .dc-li-text {
                font-size: 12px;
                color: #ffffff;
              }
            }
          }
        }
        .dc-body-bottom {
          height: 80px;
          width: 100%;
        }
        .border-dashed {
          border: 1px dashed #7c7f83;
          width: 920px;
          height: 376px;
          position: absolute;
          right: 0;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }
        .border-bg {
          width: 848px;
          height: 46px;
          position: absolute;
          left: 0;
          right: 0;
          margin: auto;
          bottom: -44px;
          background-image: url("../assets/tg.png");
          background-size: cover;
          background-position: center center;
          align-items: center;
          display: flex;
          .bg-title {
            font-size: 20px;
            color: #ffffff;
            font-weight: bold;
            font-style: italic;
            padding: 0 16px;
          }
          .bg-icon {
            width: 20px;
            height: 20px;
            background-image: url("../assets/bg-icon.png");
            // background-size: cover;
            background-position: center center;
            margin-right: 12px;
          }
          .bg-text {
            font-size: 14px;
            color: #ffffff;
            height: 20px;
            overflow: hidden;
            flex: 1;
            width: 0;
          }
          .scroller-content {
            // position: absolute;
            /* 绝对定位内容 */

            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap; //溢出不换行

            width: 100%;
            height: 20px;
            line-height: 20px;
            word-wrap: break-word;
            word-break: break-all;
            /* 与容器同宽 */
            // animation: scroll 20s linear infinite;
            /* 应用动画 */
          }
        }
      }
    }
    .dc-top {
      height: 250px;
      width: 100%;
      padding: 0 15px;
      margin-bottom: 12px;
      .top-bg {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 7px;
        background-image: url("../assets/top-bg.png");
        border: 1px dashed #7c7f83;
        background-size: cover;
        background-position: center center;
        .top-center-zb {
          width: 904px;
          height: 68px;
          margin: 0 auto;
          display: flex;
          .top-center-single {
            width: 444px;
            height: 68px;
            display: flex;
            border: 1px dashed #7c7f83;
            background-image: url("../assets/top-center-zb.png");
            background-size: cover;
            background-position: center center;
            .w-flex-1 {
              width: 0;
              flex: 1;
              padding: 9px 0 11px 24px;
              display: flex;
              .icon-48 {
                width: 48px;
                height: 48px;
                background-image: url("../assets/top-icon-1.png");
                background-size: cover;
                background-position: center center;
              }
              .icon-48-1 {
                background-image: url("../assets/top-icon-1.png");
              }
              .icon-48-2 {
                background-image: url("../assets/top-icon-2.png");
              }
              .icon-48-3 {
                background-image: url("../assets/top-icon-3.png");
              }
              .icon-48-4 {
                background-image: url("../assets/top-icon-4.png");
              }
              .icon-content {
                padding-left: 14px;
                .icon-title {
                  font-size: 14px;
                  color: #ffffff;
                  margin-bottom: 8px;
                }
                .icon-num {
                  font-size: 24px;
                  font-weight: bold;
                  color: #ffffff;

                  font-style: italic;
                }
              }
            }
          }
        }
        .top-center-num {
          width: 930px;
          margin: 0 auto;
          height: 120px;
          background-image: url("../assets/top-center.gif");
          background-size: cover;
          background-position: center center;
          display: flex;
          padding-top: 8px;
          margin-bottom: 8px;
          .top-progress {
            width: 88px;

            .process-num {
              height: 28px;
              text-align: center;
              line-height: 28px;
              font-size: 14px;
            }
          }

          .top-num {
            width: 88px;
            height: 92px;
            border: 1px dashed #7c7f83;

            color: #ffffff;
            text-align: center;
            padding-top: 28px;

            .num-info {
              font-size: 24px;
              font-style: italic;
              font-weight: bold;
            }

            .text-info {
              padding-top: 24px;
              font-size: 14px;
              color: #ffffff;
            }
          }
        }
        .top-left-content {
          display: flex;
          padding: 20px 0 20px 20px;
          flex: 1;
          height: 0;
          .top-right-echart {
            width: 0;
            flex: 1;
            // background:red;
          }
          .top-left-icon {
            width: 224px;
            height: 100%;
            display: flex;
            flex-direction: column;
            .flex-h {
              height: 0;
              flex: 1;
            }
            .top-left-icona,
            .top-left-iconb {
              height: 70px;
              border: 1px dashed #7c7f83;
              background-image: url("../assets/top-left-icon-1.png");
              background-size: cover;
              background-position: center center;

              .icon-content {
                padding-left: 100px;
                height: 100%;
                padding-top: 10px;
                .icon-title {
                  font-size: 14px;
                  color: #ffffff;
                  margin-bottom: 8px;
                }
                .icon-num {
                  font-size: 24px;
                  font-weight: bold;
                  color: #ffffff;

                  font-style: italic;
                }
              }
            }
            .top-left-iconb {
              background-image: url("../assets/top-left-icon-2.png");
            }
          }
        }
        .top-bg-left,
        .top-bg-right {
          width: 440px;
          height: 100%;
          display: flex;
          flex-direction: column;
          .pie-echarts {
            height: 210px;
            width: 100%;
            padding-top: 10px;
          }
        }

        .top-bg-center {
          width: 0;
          flex: 1;
        }
      }
    }

    .dc-header {
      height: 80px;
      background-image: url("../assets/header-bg.png");
      background-size: cover;
      background-position: center center;
    }

    .dv-dec-10,
    .dv-dec-10-s {
      // width: 33.3%;
      width: 0;
      flex: 1;
      height: 5px;
    }

    .dv-dec-10-s {
      transform: rotateY(180deg);
    }

    .dv-dec-8 {
      // width: 200px;
      width: 0;
      flex: 1;
      // height: 50px;
    }

    .title {
      width: 460px;
      height: 50px;
      background-image: url("../assets/header-title.png");
      background-size: cover;
      background-position: center center;

      // .title-text {
      //   font-size: 24px;
      //   position: absolute;
      //   bottom: 0;
      //   left: 50%;
      //   transform: translate(-50%);
      // }

      // .dv-dec-6 {
      //   position: absolute;
      //   bottom: -30px;
      //   left: 50%;
      //   width: 250px;
      //   height: 8px;
      //   transform: translate(-50%);
      // }
    }

    // 第二行
    .aside-width {
      width: 40%;
    }

    .react-r-s,
    .react-l-s {
      background-color: #0f1325;
    }

    // 平行四边形
    .react-right {
      &.react-l-s {
        text-align: right;
        width: 500px;
      }

      font-size: 18px;
      width: 300px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-left {
      &.react-l-s {
        width: 500px;
        text-align: left;
      }

      font-size: 18px;
      width: 300px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transform: skewX(45deg);
      background-color: #0f1325;

      .react-left {
        position: absolute;
        left: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      margin-top: 16px;
      display: flex;
      flex-direction: column;

      //下方区域的布局
      .content-box {
        display: grid;
        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
      }ny

      // 底部数据
      .bottom-box {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(2, 50%);
      }
    }
  }
}

.line-subwar {
  position: relative;
  z-index: 10;
  margin: 20px 0 0 500px;

  .company-l {
    width: 267px;
    display:none;
    z-index: 10;
    height: 248px;
    position: absolute;
    background-size: cover;
    background-position: center center;
    background-image: url("../assets/unit.png");
    .company-pb {
      width: 260px;
      height: 100%;
      padding-top: 40px;
      padding-left: 90px;
      .company-name {
        font-size: 14px;
        margin-bottom: 10px;
      }
      .company-status {
        width: 44px;
        height: 18px;
        background: #0080ff;
        font-size: 12px;
        text-align: center;
        line-height: 18px;
        margin-bottom: 10px;
      }
      .company-bid {
        color: #ffffff;
        font-size: 12px;
        margin-bottom: 5px;
      }
    }
  }
  // .company-r{
  //   background-image: url("../assets/unit-2.png");
  // }
  .company-active {
    display: block !important;
  }
  .company-l1 {
    left: 36px;
    top: 16px;
  }
  .map-icon {
    background: #246db3;
    position: absolute;
    border-radius: 50%;
    z-index:12;
  }
  .map-icon-1 {
    position: absolute;
    left: 20px;
    width: 32px; /* 根据你的图标大小调整 */
    height: 32px; /* 根据你的图标大小调整 */
    background: rgba(220, 255, 0, 1);
    // align-items:center;
    display: flex;
    justify-content: center;
    // background-image: url("../assets/left-btn.png");
    // background-size: cover;
    border-radius: 50%;

    .iconfont {
      color: #ffffff;
      font-size: 24px;
      animation: bounce 2s infinite;
    }
  }
  .company-l2 {
    left: -9px;
    top: 70px;
  }
  .map-icon-2 {
    position: absolute;
    left: -25px;
    top: 54px;
    width: 32px; /* 根据你的图标大小调整 */
    height: 32px; /* 根据你的图标大小调整 */
    // align-items:center;
    display: flex;
    background: rgba(137, 251, 107, 1);
    justify-content: center;
    
    border-radius: 50%;

    .iconfont {
      color: #ffffff;
      font-size: 24px;
      animation: bounce 2s infinite;
    }
  }
  .company-l3 {
    left: -320px;
    top: 136px;
    background-image: url("../assets/unit-2.png");
    .company-pb{
      padding-left: 30px;
    }
  }
  .map-icon-3 {
    left: -83px;
    top: 120px;
    width: 38px; /* 根据你的图FFFFFF标大小调整 */
    height: 38px; /* 根据你的图标大小调整 */
    display: flex;
    justify-content: center;
    background: rgba(107, 251, 206, 1);
    
    .iconfont {
      color: #ffffff;
      font-size: 24px;
      animation: bounce 2s infinite;
    }
  }
  .company-l4 {
    left: -264px;
    top: 228px;
    background-image: url("../assets/unit-2.png");
    .company-pb{
      padding-left: 30px;
    }
  }
  .map-icon-4 {
    position: absolute;
    left: -25px;
    top: 222px;
    width: 32px; /* 根据你的图标大小调整 */
    height: 32px; /* 根据你的图标大小调整 */
    // align-items:center;
    display: flex;
    background: #0080ff;
    justify-content: center;
    
    border-radius: 50%;

    .iconfont {
      color: #ffffff;
      font-size: 24px;
      animation: bounce 2s infinite;
    }
  }
  .company-l5 {
    left: 28px;
    top: 314px;
  }
  .map-icon-5 {
    position: absolute;
    left: 12px;
    top: 298px;
    width: 32px; /* 根据你的图标大小调整 */
    height: 32px; /* 根据你的图标大小调整 */
    // align-items:center;
    display: flex;
    background: #0037ff;
    justify-content: center;
    
    border-radius: 50%;

    .iconfont {
      color: #ffffff;
      font-size: 24px;
      animation: bounce 2s infinite;
    }
  }
  .company-l6 {
    left: 46px;
    top: 389px;
  }
  .map-icon-6 {
    position: absolute;
    left: 30px;
    top: 373px;
    width: 32px; /* 根据你的图标大小调整 */
    height: 32px; /* 根据你的图标大小调整 */
    // align-items:center;
    display: flex;
    background: #5800ff;
    justify-content: center;
    
    border-radius: 50%;

    .iconfont {
      color: #ffffff;
      font-size: 24px;
      animation: bounce 2s infinite;
    }
  }
  .company-l7 {
    left: 60px;
    top: 470px;
  }
  .map-icon-7 {
    position: absolute;
    left: 50px;
    top: 470px;
    width: 32px; /* 根据你的图标大小调整 */
    height: 32px; /* 根据你的图标大小调整 */
    // align-items:center;
    display: flex;
    background: #af00ff;
    justify-content: center;
    
    border-radius: 50%;

    .iconfont {
      color: #ffffff;
      font-size: 24px;
      animation: bounce 2s infinite;
    }
  }

  width: 180px;
  height: 532px;

  .line-bid-1 {
    width: 30px;
    height: 80px;
    background: rgba(220, 255, 0, 0.3);
    transform: rotate(40deg);
    .line-section {
      width: 5px;
      margin: 0 auto;
      background: rgba(220, 255, 0, 1);
    }
  }

  .line-bid-2 {
    width: 30px;
    height: 100px;
    margin-left: -55.5px;
    margin-top: -24px;
    background: rgba(137, 251, 107, 0.3);
    transform: rotate(40deg);
    .line-section {
      width: 5px;
      margin: 0 auto;
      background: rgba(137, 251, 107, 1);
    }
  }

  .line-bid-3 {
    width: 30px;
    height: 130px;
    margin-left: -54.5px;
    margin-top: -37px;
    background: rgba(107, 251, 206, 0.3);
    transform: rotate(-30deg);
    .line-section {
      width: 5px;
      margin: 0 auto;
      background: rgba(107, 251, 206, 1);
    }
  }

  .line-bid-4 {
    width: 30px;
    height: 80px;
    margin-left: -2.5px;
    margin-top: -15px;
    background: rgba(0, 128, 255, 0.3);
    transform: rotate(-30deg);
    .line-section {
      width: 5px;
      margin: 0 auto;
      background: rgba(0, 128, 255, 1);
    }
  }
  .line-bid-4 {
    width: 30px;
    height: 80px;
    margin-left: -6.5px;
    margin-top: -15px;
    background: rgba(0, 128, 255, 0.3);
    transform: rotate(-25deg);
    .line-section {
      width: 5px;
      margin: 0 auto;
      background: rgba(0, 128, 255, 1);
    }
  }
  .line-bid-5 {
    width: 30px;
    height: 80px;
    margin-left: 19.5px;
    margin-top: -3px;
    background: rgba(0, 55, 255, 0.3);
    transform: rotate(-15deg);
    .line-section {
      width: 5px;
      margin: 0 auto;
      background: rgba(0, 55, 255, 1);
    }
  }
  .line-bid-6 {
    width: 30px;
    height: 90px;
    margin-left: 41px;
    margin-top: -3px;
    background: rgba(88, 0, 255, 0.3);
    transform: rotate(-10deg);
    .line-section {
      width: 5px;
      margin: 0 auto;
      background: rgba(88, 0, 255, 1);
    }
  }
  .line-bid-7 {
    width: 30px;
    height: 70px;
    margin-left: 60px;
    margin-top: -3px;
    background: rgba(175, 0, 255, 0.3);
    transform: rotate(-20deg);
    .line-section {
      width: 5px;
      margin: 0 auto;
      background: rgba(175, 0, 255, 1);
    }
  }
  .line.bid-hover .line-section {
    transition: all 1s;
  }
  .line-bid-hover:hover .line-section {
    opacity: 0.5;
  }
}

.dv-cap-chart {
  width: 100%;
  height: 160px;
}
.dc-btn {
  display: flex;
  padding: 10px 0;
  .dc-btn-w {
    flex: 1;
    width: 0;
  }
  .dc-btn-box {
    width: 140px;
    height: 38px;
    display: flex;
    .dc-btn-b {
      cursor: pointer;
      width: 70px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #ffffff;
      background-size: cover;
      background-position: center center;
    }
    .dc-btn-l {
      background-image: url("../assets/left-btn.png");
    }
    .dc-btn-la {
      background-image: url("../assets/left-btn-a.png");
    }
    .dc-btn-r {
      background-image: url("../assets/right-btn.png");
    }
    .dc-btn-ra {
      background-image: url("../assets/right-btn-a.png");
    }
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(-10px);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.active-h {
  height: 100% !important;
}
.active {
  animation: progress-1 5s ease !important; /* 添加动画效果 */
}

@keyframes progress-1 {
  from {
    height: 0;
  }
  to {
    height: 98%;
  }
}
</style>
